<template>
  <view class="confirm-order">
    <nav-bar title="确认订单" backgroundColor="#115BAA" titleColor="#FFF"></nav-bar>
    <scroll-view scroll-y :style="{ height: scrollHeight }">
      <view class="top-box">
        <view class="address-box">
          <view class="top-tab">
            <view
              :class="['tab-item', tabActive === 'express' ? 'active-item' : '']"
              @click="clickTabItem('express')"
            >
              <view class="tab-text">快递</view>
              <view class="bottom-line" v-if="tabActive === 'express'"></view>
              <view class="tab-bg" v-if="tabActive === 'express'">
                <image class="bg-img" :src="baseImgUrl + '/userImg/img_left_tab.png'" />
              </view>
            </view>
            <view
              :class="['tab-item', tabActive === 'selfPickup' ? 'active-item' : '']"
              @click="clickTabItem('selfPickup')"
            >
              <view class="tab-text">自提</view>
              <view class="bottom-line" v-if="tabActive === 'selfPickup'"></view>
              <view class="tab-bg" v-if="tabActive === 'selfPickup'">
                <image class="bg-img" :src="baseImgUrl + '/userImg/img_right_tab.png'" />
              </view>
            </view>
          </view>
          <view class="address-content">
            <view class="icon">
              <uni-icons type="location-filled" size="22" color="#115BAA"></uni-icons>
            </view>
            <view class="content">
              <view class="content-data" v-if="chooseData.address" @click="clickAddressItem">
                <view class="company" v-if="tabActive === 'selfPickup'">{{ chooseData.companyName || chooseData.contactPer }}</view>
                <view class="person-box">
                  <view class="person">{{ chooseData.receiverName }}</view>
                  <view class="phone">{{ chooseData.phoneNumber }}</view>
                </view>
                <view class="address">{{ chooseData.address }}</view>
              </view>
              <view class="no-data" v-else @click="clickAddress">
                {{ tabActive === 'express' ? '选择收货地址' : '选择自提点' }}
              </view>
            </view>
            <view class="right-icon" v-if="chooseData.address" @click="clickAddressItem">
              <uni-icons type="right" size="18" color="#999"></uni-icons>
            </view>
            <view class="right-icon" v-else @click="clickAddress">
              <uni-icons type="right" size="18" color="#999"></uni-icons>
            </view>
          </view>
        </view>
        <view class="orthoses-box">
          <view class="orthoses-detail">
            <view class="img-box">
              <image
                class="img"
                :src="orthosesDetail.deviceImg || baseImgUrl + '/userImg/img_service_middle.png'"
                mode="aspectFill"
              />
            </view>
            <view class="detail">
              <view class="name">{{ orthosesDetail.deviceName }}</view>
              <view class="price">
                <text class="price-icon">￥</text>{{ orthosesDetail.price || '' }}
              </view>
            </view>
          </view>
          <view class="number">
            <view class="label">数量</view>
            <view class="value">
              <uni-number-box v-model="totalNum" :min="1" @change="changeValue" />
            </view>
          </view>
          <view class="remark">
            <view class="label">备注</view>
            <view class="value">
              <uni-easyinput
                class="remark-input"
                type="textarea"
                v-model="remark"
                placeholder="请输入留言..."
              ></uni-easyinput>
            </view>
          </view>
        </view>
      </view>
      <view class="other-box">
        <view class="other-list">
          <view
            class="other-item"
            v-for="(item, index) in otherList"
            :key="index"
          >
            <view class="other-label">{{ item.label }}</view>
            <view class="c"><text>{{ item.disCont }}</text>
              {{ item.key === 'totalNum' ? totalNum : orthosesDetail[item.key] }}
            </view>
          </view>
        </view>
        </view>
    </scroll-view>
    <view class="form_bottom_btn">
      <view class="btn-box">
        <view class="confirm" @click="clickBuy">提交订单</view>
      </view>
    </view>
  </view>
</template>

<script>
  import { baseImgUrl } from '@/config'
  export default {
    name: 'OrderConfirm',
    data() {
      return {
        baseImgUrl,
        scrollHeight: '',
        tabActive: 'express', // express 收货，selfPickup 自提
        chooseData: {},
        chooseExpress: {},
        chooseAddress: {},
        remark: '',
        totalNum: 1,
        otherList: [
          { label: '商品数量', key: 'totalNum' },
          { label: '合计', key: 'totalAmount', disCont: '￥' }
        ],
        orthosesDetail: null
      }
    },

    onLoad(options) {
      this.scrollHeight = this.$store.getters.heightData.noTabMainHeight - 64 + 'px'
      if (options.chooseAddress) {
        this.chooseAddress = JSON.parse(decodeURIComponent(options.chooseAddress))
      }
      if (options.chooseExpress) {
        this.chooseExpress = JSON.parse(decodeURIComponent(options.chooseExpress))
      }
      if (options.tabActive) {
        this.tabActive = options.tabActive
        this.chooseData = this.tabActive === 'express' ? this.chooseExpress : this.chooseAddress
      } else {
        this.chooseData = this.chooseExpress
      }
      this.orthosesDetail = uni.getStorageSync('orthosesDetail')
      this.totalNum = this.orthosesDetail.totalNum
      this.getTotalPrice()
    },

    methods: {
      clickTabItem(tabName) {
        this.tabActive = tabName
        this.chooseData = tabName === 'express' ? this.chooseExpress : this.chooseAddress
      },
      changeValue(value) {
        this.totalNum = value
        this.orthosesDetail = {
          ...this.orthosesDetail,
          totalNum: value
        }
        this.getTotalPrice()
        uni.setStorageSync('orthosesDetail', this.orthosesDetail)
      },
      getTotalPrice() {
        const { price } = this.orthosesDetail
        this.orthosesDetail = {
          ...this.orthosesDetail,
          totalAmount: this.$utils.numberMul(this.totalNum, Number(price))
        }
      },
      clickAddress() {
        if (this.tabActive === 'selfPickup') {
          uni.navigateTo({
            url: `/subPages/userIndex/rehabilitationAids/chooseAddress`
          })
        } else {
          uni.navigateTo({
            url: `/subPages/userIndex/rehabilitationAids/goodsAddress`
          })
        }
      },
      clickAddressItem() {
        if (this.tabActive === 'selfPickup') {
          const chooseAddress = encodeURIComponent(JSON.stringify(this.chooseAddress))
          uni.navigateTo({
            url: `/subPages/userIndex/rehabilitationAids/chooseAddress?chooseAddress=${chooseAddress}`
          })
        } else {
          const chooseExpress = encodeURIComponent(JSON.stringify(this.chooseExpress))
          uni.navigateTo({
            url: `/subPages/userIndex/rehabilitationAids/goodsAddress?chooseExpress=${chooseExpress}`
          })
        }
      },
      clickBuy() {
        if (!this.chooseData.address) {
          uni.showToast({
            title: this.tabActive === 'selfPickup' ? '请选择自提点' : '请填写收货地址',
            icon: 'error',
            mask: true
          })
          return
        }
        const params = {
          price: this.orthosesDetail.price,
          totalNum: this.totalNum,
          goodId: this.orthosesDetail.id,
          remark: this.remark,
          orderType: 3, // 1 普通会员  2 vip定服务  3 康复辅具
          totalAmount: this.orthosesDetail.totalAmount,
          receiverName: this.chooseData.receiverName,
          receiverPhone: this.chooseData.phoneNumber,
          receiverAddress: this.chooseData.address,
          companyName: this.tabActive === 'selfPickup' ? this.chooseData.companyName : null
        }
        const payParams = encodeURIComponent(JSON.stringify(params))
        uni.navigateTo({
          url: `/subPages/userIndex/rehabilitationAids/orderPay?payParams=${payParams}`
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .top-box {
    position: relative;
    padding: 40rpx 30rpx 0;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 50%;
      background: linear-gradient(180deg, #5992E3 0%, #F8F8F8 100%);
      z-index: -1;
    }
    .address-box {
      border-radius: 16rpx;
      .top-tab {
        position: relative;
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        height: 46px;
        border-radius: 16rpx 16rpx 0 0;
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 16rpx 16rpx 0 0;
          background: linear-gradient(180deg, #c7dcf9, #ffffff);
          z-index: -1;
        }
        .tab-item {
          position: relative;
          width: 50%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 28rpx;
          font-weight: 500;
          color: #999;
          .tab-text {
            z-index: 1;
          }
          .bottom-line {
            position: absolute;
            bottom: 0;
            width: 60rpx;
            height: 8rpx;
            border-radius: 4rpx;
            background-color: #115BAA;
            z-index: 1;
          }
          .tab-bg {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 100rpx;
            z-index: 0;
            .bg-img {
              width: 100%;
              height: 100rpx;
            }
          }
        }
        .active-item {
          color: #333;
        }
      }
      .address-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 54rpx 30rpx;
        background-color: #FFF;
        .content {
          flex: 1;
          margin: 0 30rpx;
          .no-data {
            font-size: 28rpx;
            color: #999;
          }
          .content-data {
            .company {
              font-size: 28rpx;
              font-weight: 500;
              color: #333;
            }
            .person-box {
              display: flex;
              align-items: center;
              margin: 14rpx 0;
              font-size: 28rpx;
              .person {
                margin-right: 30rpx;
              }
            }
            .address {
              font-size: 24rpx;
              color: #999;
            }
          }
        }
      }
    }
    .orthoses-box {
      margin: 30rpx 0;
      padding: 20rpx 30rpx 30rpx;
      border-radius: 16rpx;
      background-color: #FFF;
      .orthoses-detail {
        display: flex;
        .img-box {
          width: 240rpx;
          height: 240rpx;
          margin-right: 28rpx;
          border: 2rpx solid #F8F8F8;
          border-radius: 20rpx;
          .img {
            width: 100%;
            height: 100%;
          }
        }
        .detail {
          flex: 1;
          padding: 12rpx 0 20rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .name {
            font-size: 32rpx;
            color: #333;
          }
          .price {
            font-size: 28rpx;
            color: #FF513A;
            .price-icon {
              font-size: 20rpx;
            }
          }
        }
      }
      .number {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 30rpx 0;
        .label {
          font-size: 28rpx;
          color: #333;
        }
      }
      .remark {
        .label {
          margin-bottom: 24rpx;
          font-size: 28rpx;
          color: #333;
        }
        .remark-input {
          border: none !important;
        }
      }
    }
  }
  .other-box {
    padding: 0 30rpx 30rpx;
    .other-list {
      padding: 30rpx;
      border-radius: 16rpx;
      background-color: #FFF;
      .other-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 60rpx;
        &:last-child {
          margin-bottom: 0;
        }
        .other-label {
          font-size: 28rpx;
          color: #000;
        }
        .other-value {
          font-size: 28rpx;
          color: #333;
        }
      }
    }
  }
</style>
